<template>
  <van-action-sheet
      :duration="duration"
      :position="position"
      teleport="body"
      :actions="actions" :beforeClose="beforeClose"
      @click-overlay="cancel"
      @cancel="cancel" :title="title"
      class="h-popup" :show="show">
    <slot v-if="$slots.default"/>
  </van-action-sheet>
</template>
<script setup>
import {createProps} from '@/utils';
import {nextTick, onMounted, watch} from 'vue';
import {pushPopup} from '@/utils/PopUtils';

defineOptions({name: 'HPopup'});
const props = defineProps({
  show: createProps(Boolean),
  title: createProps(String),
  duration: createProps(String, '0.2'),
  position: createProps(String, 'bottom'),
  actions: createProps(Array),
  beforeClose: {
    type: Function,
    default: () => undefined
  }
});
const emits = defineEmits(['update:show']);

function cancel() {
  window.history.back();
}

function doClose() {
  emits('update:show', false);
}

onMounted(() => {
  nextTick(() => {
    if (props.show) {
      // console.log('nextTick---------')
      pushPopup({
        close: () => {
          doClose();
        }
      });
    }
  })
})

watch(() => props.show, () => {
  nextTick(() => {
    if (props.show) {
      // console.log('nextTick-')
      pushPopup({
        close: () => {
          doClose();
        }
      });
    }
  });
});

</script>
<style lang="less">
.h-popup {
  min-height: 70vh;
  width: 100vw;
}
</style>